<template>
  <view class="tab-page">
    <view class="custom-tabbar">
      <view v-for="(item, index) in tabList" :key="index" class="tabbar-item" :class="{ active: currentPath == index }" @click="switchTab(index)">
        {{ item.text }}
      </view>
    </view>
    <swiper class="swiper" :current="currentPath" :indicator-dots="false" @change="swiperChange">
      <swiper-item class="swiper-item">
        <Follow></Follow>
      </swiper-item>
      <swiper-item class="swiper-item">
        <Find></Find>
      </swiper-item>
      <swiper-item class="swiper-item">
        <Chat></Chat>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import Chat from "../chat/chat.vue"
import Find from "../find/find.vue"
import Follow from "../find/follow.vue"
export default {
  components: { Chat, Find, Follow },
  data() {
    return {
      currentPath: 2,
      tabList: [
        { pagePath: 'follow', text: '关注' },
        { pagePath: 'find', text: '社区' },
        { pagePath: 'chat', text: '消息' }
      ]
    }
  },
  methods: {
    switchTab(index) {
      if (this.currentPath === index) return
      this.currentPath = index
    },
    swiperChange(e) {
      this.currentPath = e.detail.current
      console.log(e.detail.current);
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .custom-tabbar {
    height: 88rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .tabbar-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 24rpx;
      color: #878787;

      &.active {
        color: #000000;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          bottom: 16rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 56rpx;
          height: 6rpx;
          background: #7414ff;
          border-radius: 3rpx;
        }
      }
    }
  }

  .swiper {
    height: calc(100vh - 88rpx);
  }
}
</style>